<template>
  <basic-container :btnFlag="true">
    <div class="card-border"
         style="padding-bottom: 28px;">
      <card-header :header-data="headerData"></card-header>
      <div class="step-group"
           style="margin: 66px 20px 1px;">
        <el-steps :active="4"
                  v-if="havModifyOpinion">
          <el-step title="上报报告"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-edit"
                   class="transform-deg_two"></el-step>
          <el-step title=""
                   icon="el-icon-edit"
                   class="transform-deg_line_two"></el-step>
          <el-step title="党委"
                   icon="el-icon-upload"
                   class="beian_two"></el-step>
          <el-step title="人大"
                   icon="el-icon-upload"
                   style="margin-top: 35px;margin-left: -250px;"></el-step>

        </el-steps>
        <!--<el-steps :active="4"-->
        <!--v-if="havModifyOpinion">-->
        <!--<el-step title="上报报告"-->
        <!--icon="el-icon-edit"></el-step>-->
        <!--<el-step title="政府"-->
        <!--icon="el-icon-upload"></el-step>-->
        <!--<el-step title="党委"-->
        <!--icon="el-icon-message-solid"></el-step>-->
        <!--<el-step title="政府"-->
        <!--icon="el-icon-upload"></el-step>-->
        <!--<el-step title="人大"-->
        <!--icon="el-icon-picture"></el-step>-->
        <!--</el-steps>-->
        <el-steps :active="2"
                  v-else>
          <el-step title="上报报告"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="人大"
                   icon="el-icon-picture"></el-step>
          <el-step title="抄送上级发改"
                   icon="el-icon-upload"></el-step>
        </el-steps>
      </div>
      <el-form label-width="130px"
               :model="reportData"
               style="padding-right: 30px;margin-top:30px"
               :rules="reportDataRules"
               ref="reportData">
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item"
                          label="办理结果 ："
                          prop="approvedResult">
              <el-radio-group v-model="reportData.approvedResult">
                <el-radio :label="1">同意</el-radio>
                <el-radio :label="2">原则通过</el-radio>
                <el-radio :label="3">退回修改</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item"
                          label="意见或理由 ："
                          prop="opinion">
              <el-input type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="请输入意见或理由"
                        v-model="reportData.opinion	"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22"
                  style="margin-top: 20px">
            <el-form-item class="form-item"
                          label="意见附件 :">
              <el-upload class="upload-demo"
                         ref="upload"
                         :limit="1"
                         :on-exceed="tipFileOne"
                         action="string"
                         :http-request="submitUploadtextMixin"
                         :on-preview="handlePreviewtextMixin"
                         :on-remove="handleRemovetextMixin"
                         :file-list="fileListtextMixin"
                         :auto-upload="true"
                         :on-change="fileChangetextMixin">
                <el-button slot="trigger"
                           size="small"
                           type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;">
        <el-button type="warning"
                   @click="submitReview()">确定</el-button>
        <el-button type="info"
                   @click.stop="goBack()">关闭</el-button>
      </div>
      <!-- <el-collapse v-model="activeNamessd">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">政府审定意见</div>
            </div>
          </template>

          <div class="searchDetail">
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px;">审定结果</th>
                <td colspan="3" class="bs-table_td">同意</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px;">意见或理由</th>
                <td
                  colspan="3"
                  class="bs-table_td"
                >{{$route.query.opinion?$route.query.opinion:'无'}}</td>
              </tr>
            </table>
          </div>
        </el-collapse-item>
      </el-collapse> -->
      <el-collapse v-model="activeNameshz">
        <el-collapse-item name="3">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">中期评估报告信息</div>
            </div>
          </template>
          <div class="searchDetail">
            <report-detail @putData="putData"
                           :reportId="$route.query.reportId"></report-detail>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">部门意见汇总</div>
            </div>
          </template>
          <avue-crud :data="otherOpninionListData"
                     :option="otherOpninionTableOption"
                     :page="otherOpninionPage"
                     :table-loading="otherOpninionTableLoading"
                     @on-load="getOtherOpninionList"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     class="avuecrud"></avue-crud>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">报告流程处理历史信息</div>
            </div>
          </template>
          <avue-crud :data="historyData"
                     :option="option"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getToDoList"
                     class="avuecrud">
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
    </div>
  </basic-container>
</template>

<script>
import {
  getReportDetail,
  reportReview,
  getOtherOpninionList,
  getReportHistory
} from "@/api/pim/pim";
import { getfileinfopage } from "@/api/system";
import { getNotNull } from "@/views/util";
import { ITEM_OPINION_DIC } from "@/const/dict";
import reportDetail from "@/components/pim/report/detail";
import textfile from "@/mixins/textfile";

export default {
  name: "reportReview",
  components: {
    reportDetail
  },
  mixins: [textfile],
  created () {
    this.getReportHistory()
  },
  data () {
    return {
      projectForm: {  //用于存放相关报告和相关附件
        textId: null,
      },
      historyData: [],
      option: {
        page: false,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        cellBtn: false,
          indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menuWidth: 100,
        menu: false,
        keyId: "id",
        column: [
          {
            label: "环节名称",
            prop: "taskName",
            cell: true,
            width: 120,
          },
          {
            label: "办理部门",
            prop: "assigneeNickname",
            cell: true,
            width: 180,
          },
          {
            label: "相关意见",
            prop: "opinion",
            cell: true,
          },
        ]
      },
      havModifyOpinion: '',
      otherOpninionListData: [],
      otherOpninionTableOption: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: false,
        cellBtn: false,
          indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        menu: false,
        searchBtn: false,
        keyId: "id",
        column: [
          {
            label: "反馈部门",
            prop: "targetDeptName",
            width: 120,
            cell: true
          },
          {
            label: "部门意见",
            prop: "showOpinion",
            overHidden: true,
            cell: true
          },
          {
            label: "联系人",
            prop: "showContact",
            width: 100,
            cell: true
          },
          {
            label: "联系电话",
            prop: "showContactPhone",
            width: 180,
            cell: true
          },
          {
            label: "状态",
            prop: "state",
            width: 120,
            cell: true,
            dicData: ITEM_OPINION_DIC.TYPE
          }
        ]
      },
      otherOpninionPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      otherOpninionTableLoading: false,
      reportDataRules: {
        approvedResult: [
          { required: true, message: "请选择办理结果", trigger: "change" }
        ],
        opinion: [
          { required: true, message: "请输入意见或理由", trigger: "blur" }
        ]
      },
      reportData: {
        approvedResult: 1,
        opinion: "",
      },
      headerData: {
        title: "人大办理"
      },
      activeNameshz: ["1", '2', "3"]
    };
  },

  watch: {
    "reportData.approvedResult": {
      immediate: true,
      handler (val) {
        if (val == 1 || val == 2) {
          this.reportDataRules.opinion[0].required = false;
        } else {
          this.reportDataRules.opinion[0].required = true;
        }
      }
    }
  },
  methods: {

    getReportHistory () {
      getReportHistory(Object.assign({
        reportId: this.$route.query.reportId,
      })).then(response => {
        this.historyData = response.data.data;
      })
    },
    putData (data) {
      this.havModifyOpinion = data.havModifyOpinion
    },
    getOtherOpninionList (page) {
      getOtherOpninionList(
        Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          relateId: this.$route.query.reportId,
          type: "8"
        })
      ).then(response => {
        this.otherOpninionListData = response.data.data.records;
        this.otherOpninionPage.total = response.data.data.total;
      });
    },
    currentChange (currentPage) {
      var page = this.otherOpninionPage;
      page.currentPage = currentPage;
      this.getOtherOpninionList(page);
    },
    sizeChange (pageSize) {
      var page = this.otherOpninionPage;
      page.pageSize = pageSize;
      this.getOtherOpninionList(page);
    },
    reportTypeTransform (reportType, year) {
      switch (reportType) {
        case "2":
          return "中期评估报告";
          break;
        case "3":
          return "期末总结报告";
          break;
        case "1":
          return year + "年度监测分析报告";
          break;
      }
    },
    goBack () {
      this.$router.go(-1);
    },
    submitReview () {
      this.$refs.reportData.validate(valid => {
        let approved_fileIds = [];
        for (var item in this.fileListtextMixin) {
          approved_fileIds.push(this.fileListtextMixin[item].url);
        }
        let data = {
          opinion: this.reportData.opinion,
          approved_fileIds: approved_fileIds,
          approvedResult: this.reportData.approvedResult
        };
        if (valid) {
          this.$confirm("确定办理么?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            reportReview(this.$route.params.id, data).then(response => {
              if (response.data.code == "0") {
                this.$message({
                  message: "办理成功！",
                  type: "success"
                });
                this.$router.go(-1);
              }
            });
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.transform-deg_two {
  /deep/.el-step__line {
    transform: rotate(-11deg);
    margin-top: -17px;
  }
}
.transform-deg_line_two {
  margin-left: -248px;

  /deep/.el-step__line {
    transform: rotate(11deg);
    margin-top: 17px;
  }
}
.beian_two {
  margin-top: -62px;
  margin-left: 8px;

  /deep/.el-step__line {
    display: none;
  }
}
.step-group {
  margin: 5rem 0;
  margin-bottom: 1px;
}

.form-item {
  color: black;
  font-size: 16px;
  font-weight: 600;
}
</style>
